import React, { Component } from 'react';
import { Form, Input, Row, Col, Button, Select, DatePicker, message } from 'antd';
import Params from '../../utils/page';
import { submit, get, dic } from '../../services/user';
import utils from '../../utils/index';
import Proptyps from 'prop-types';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class Detail extends Component {
  state = {
    detail: {},
    submitting: false,
    dictionary: {
      gender: [],
      status: [],
    },
  };

  static propTypes = {
    pageType: Proptyps.string.isRequired,
    busId: Proptyps.number,
    onClose: Proptyps.func.isRequired,
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }

      this.setState({ submitting: true });

      values.birthday = utils.format(values.birthday, 'YYYY-MM-DD');

      submit(values).then(
        data => {
          data.results.info.birthday = utils.moment(data.results.info.birthday, 'YYYY-MM-DD');

          this.setState({
            submitting: false,
          });

          if (data.success) {
            message.success('保存成功!');
            this.props.onClose(true);
          } else {
            message.error(data.message);
          }
        },
        error => {
          this.setState({ submitting: false });
          message.error(error);
        },
      );
    });
  };

  handleClose = () => {
    this.props.onClose();
  };

  fetch = () => {
    const { pageType, busId } = this.props;

    if (pageType !== Params.pageType.NONE) {
      let closeOk = this.handleClose;

      if (busId) {
        Promise.all([dic(), get({ id: busId })])
          .then(([dictionary, data]) => {
            this.setState({
              dictionary: dictionary.results,
            });

            if (data.success) {
              data.results.birthday = utils.moment(data.results.birthday, 'YYYY-MM-DD');
              this.setState({
                detail: data.results,
              });
            } else {
              message.error(data.message);
              closeOk();
            }
          })
          .catch(() => {
            closeOk();
          });
      }
      else {
        dic().then(dictionary => {
          this.setState({
            dictionary: dictionary.results,
          });
        })
      }
    }
  };

  componentDidMount() {
    this.fetch();
  }

  render() {
    let { pageType } = this.props;

    if (pageType === Params.pageType.NONE) {
      return <div></div>;
    }

    const {
      form: { getFieldDecorator },
    } = this.props;

    const { detail, submitting } = this.state;

    const { gender, status } = this.state.dictionary;

    const formItemLayout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };

    const formAllItemLayout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
    };

    const disabledEdit = pageType === Params.pageType.EDIT || pageType === Params.pageType.VIEW;
    const disabledView = pageType === Params.pageType.VIEW;

    const showSubmit = pageType === Params.pageType.EDIT || pageType === Params.pageType.ADD;

    const action = (
      <div>
        <Button
          type="primary"
          onClick={this.handleSubmit}
          loading={submitting}
          style={{ display: showSubmit ? 'inline' : 'none' }}
        >
          提 交
        </Button>
        <Button
          type="default"
          onClick={this.handleClose}
          loading={submitting}
          style={{ marginLeft: '5px' }}
        >
          关 闭
        </Button>
      </div>
    );

    return pageType === Params.pageType.NONE ? (
      <div></div>
    ) : (
      <div>
        <Form disabled={pageType === Params.pageType.VIEW}>
          <Row gutter={24}>
            <Col span={12}>
              <FormItem {...formItemLayout} label="编号">
                {getFieldDecorator('code', {
                  rules: [
                    {
                      required: true,
                      message: '请输入编号',
                    },
                    {
                      max: 20,
                      message: '允许最大输入20个字符',
                    },
                  ],
                  initialValue: detail.code,
                })(<Input placeholder="请输入编号" disabled={disabledEdit} />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout} label="用户姓名">
                {getFieldDecorator('name', {
                  rules: [
                    {
                      required: true,
                      message: '请输入用户姓名',
                    },
                    {
                      max: 20,
                      message: '允许最大输入20个字符',
                    },
                  ],
                  initialValue: detail.name,
                })(<Input placeholder="请输入用户姓名" disabled={disabledView} />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <FormItem {...formAllItemLayout} label="身份证">
                {getFieldDecorator('cardNo', {
                  rules: [
                    {
                      required: true,
                      message: '请输入身份证',
                    },
                    {
                      min: 18,
                      message: '身份证为18位',
                    },
                  ],
                  initialValue: detail.cardNo,
                })(<Input placeholder="请输入身份证" disabled={disabledView} />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="性 别" {...formItemLayout}>
                {getFieldDecorator('gender', { initialValue: detail.gender })(
                  <Select placeholder="请选择性别" disabled={disabledView}>
                    {gender.map((item, index) => (
                      <Option value={item.key} key={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>,
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="出生日期" {...formItemLayout}>
                {getFieldDecorator('birthday', { initialValue: detail.birthday })(
                  <DatePicker
                    placeholder="开始日期"
                    style={{ width: '100%' }}
                    disabled={disabledView}
                  />,
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="状 态" {...formItemLayout}>
                {getFieldDecorator('status', { initialValue: detail.status })(
                  <Select placeholder="请选择状态" disabled={disabledView}>
                    {status.map((item, index) => (
                      <Option value={item.key} key={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>,
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="联系电话" {...formItemLayout}>
                {getFieldDecorator('phone', { initialValue: detail.phone })(
                  <Input placeholder="请输入联系电话" disabled={disabledView} />,
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Form.Item label="邮箱地址" {...formAllItemLayout}>
                {getFieldDecorator('email', {
                  rules: [
                    {
                      type: 'email',
                      message: '请按照name@supcon.com的格式输入邮箱地址',
                    },
                  ],
                  initialValue: detail.email,
                })(<Input placeholder="请输入邮箱地址" disabled={disabledView} />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Form.Item label="备 注" {...formAllItemLayout}>
                {getFieldDecorator('remark', { initialValue: detail.remark })(
                  <TextArea
                    placeholder="请输入备注信息"
                    autosize={{ minRows: 4, maxRows: 8 }}
                    disabled={disabledView}
                  />,
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="id" {...formItemLayout} style={{ display: 'none' }}>
                {getFieldDecorator('id', {
                  initialValue: detail.id,
                })(<Input disabled={disabledView} />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>

        <div style={{ textAlign: 'right' }}>{action}</div>
      </div>
    );
  }
}

export default Detail;
